<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <meta name="theme-color" content="#01c352" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <!-- <link rel="manifest" href="/manifest.json" /> -->
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <meta name="description" content="Your private note taking space" />
    <meta property="og:title" content="Notesnook Theme Builder" />
    <meta
      property="og:description"
      content="A fully open source & end-to-end encrypted note taking alternative to Evernote."
    />
    <meta property="og:image" content="https://app.notesnook.com/banner.jpg" />
    <meta
      property="og:image:alt"
      content="A fully open source & end-to-end encrypted note taking alternative to Evernote."
    />
    <meta property="og:url" content="https://app.notesnook.com/" />
    <meta property="og:type" content="website" />
    <meta
      property="og:site_name"
      content="Notesnook Theme Builder by Streetwriters LLC"
    />
    <meta name="twitter:card" content="summary_large_image" />
    <title>Notesnook Theme Builder</title>
    <style id="theme-colors">
      #splash {
        display: none !important;
      }
    </style>
    <script type="module">
      import { themeToCSS } from "@notesnook/theme";

      const colorScheme = JSON.parse(
        window.localStorage.getItem("colorScheme") || '"light"'
      );
      const root = document.querySelector("html");
      if (root) root.setAttribute("data-theme", colorScheme);

      const theme = window.localStorage.getItem(`theme:${colorScheme}`);
      if (theme) {
        const css = themeToCSS(JSON.parse(theme));
        const stylesheet = document.getElementById("theme-colors");
        if (stylesheet) stylesheet.innerHTML = css;
      }
    </script>
    <script type="module" src="/index.tsx"></script>
    <style>
      html {
        overscroll-behavior: none;
      }

      html[data-theme="light"] .react-loading-skeleton {
        --base-color: var(--background-secondary);
        --highlight-color: #var(--background-secondary);
      }

      html[data-theme="dark"] .react-loading-skeleton {
        --base-color: var(--background-secondary);
        --highlight-color: var(--background-secondary);
      }

      #splash {
        background-color: var(--background);
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      #splash svg {
        transform: scale(1);
        animation: pulse 2s infinite;
      }

      @keyframes pulse {
        0% {
          transform: scale(0.9);
        }

        70% {
          transform: scale(1);
        }

        100% {
          transform: scale(0.9);
        }
      }

      html,
      body {
        font-size: 16px;
      }

      @media only screen and (max-width: 480px) {
        html,
        body {
          font-size: 18px;
          background-color: var(--background);
        }
      }

      :root,
      body,
      #root {
        margin: 0 !important;
        height: 100%;
        overflow: hidden;
      }

      #root {
        display: flex;
        flex-direction: column;
      }

      /* svg {
  width: 1.5rem;
} */
      .ReactModal__Overlay {
        opacity: 0;
        transition: opacity 200ms ease-in-out;
      }

      .ReactModal__Overlay--after-open {
        opacity: 1;
      }

      .ReactModal__Overlay--before-close {
        opacity: 0;
      }

      .slide {
        background-color: transparent !important;
      }

      .carousel.carousel-slider {
        display: flex;
        flex-direction: row;
      }
    </style>
  </head>

  <body class="theme-scope-base">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!--     <script src="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
 -->
    <div id="root"></div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      style="height: 0; width: 0; z-index: -1; position: absolute"
    >
      <symbol id="full-logo" viewBox="0 0 1000 1000">
        <rect
          width="1000"
          height="1000"
          rx="30%"
          ry="30%"
          style="fill: var(--paragraph)"
        />
        <g transform="translate(275,176.95254)">
          <path
            style="fill: var(--background)"
            d="M437.985 493.919c-17.255 50.411-51.835 93.065-97.588 120.372-45.752 27.307-99.71 37.496-152.269 28.753-52.56-8.743-100.313999-35.85-134.763-76.498C18.916 525.898.006 474.347 0 421.064v-110.25l79.121001 33.053v77.152c-.007 20.779 4.434 41.318 13.024 60.237C100.735 500.176 113.276 517.037 128.925 530.707c2.97 2.587 6.053 5.107 9.236 7.459 23.357 17.388 51.402 27.352 80.494 28.597.99 0 1.946.079 2.925.101.979.023 2.25 0 3.375 0h3.375c1.125 0 1.935 0 2.925-.101 29.081-1.248 57.116-11.203 80.471-28.575 3.173-2.351 6.255-4.86 9.237-7.447 20.556-17.98 35.656-41.366 43.582-67.5zM450 225v196.065c0 2.531 0 5.074-.158 7.605l-78.963-33.019V225c-.013-37.684-14.607-73.901-40.725-101.066-26.119-27.164003-61.735-43.168003-99.389-44.660003-37.655-1.492-74.426 11.644-102.611 36.657003-28.185999 25.013-45.599999 59.962-48.593999 97.526-.281 3.803-.439 7.662-.439 11.543v48.712L0 240.637V0h225c59.674 0 116.903 23.705 159.099 65.901C426.295 108.097 450 165.326 450 225Z"
          />
        </g>
      </symbol>
      <symbol id="themed-logo" viewBox="0 0 450 646.09491">
        <path
          style="fill: var(--paragraph)"
          d="M437.985 493.919c-17.255 50.411-51.835 93.065-97.588 120.372-45.752 27.307-99.71 37.496-152.269 28.753-52.56-8.743-100.313999-35.85-134.763-76.498C18.916 525.898.006 474.347 0 421.064v-110.25l79.121001 33.053v77.152c-.007 20.779 4.434 41.318 13.024 60.237C100.735 500.176 113.276 517.037 128.925 530.707c2.97 2.587 6.053 5.107 9.236 7.459 23.357 17.388 51.402 27.352 80.494 28.597.99 0 1.946.079 2.925.101.979.023 2.25 0 3.375 0h3.375c1.125 0 1.935 0 2.925-.101 29.081-1.248 57.116-11.203 80.471-28.575 3.173-2.351 6.255-4.86 9.237-7.447 20.556-17.98 35.656-41.366 43.582-67.5zM450 225v196.065c0 2.531 0 5.074-.158 7.605l-78.963-33.019V225c-.013-37.684-14.607-73.901-40.725-101.066-26.119-27.164003-61.735-43.168003-99.389-44.660003-37.655-1.492-74.426 11.644-102.611 36.657003-28.185999 25.013-45.599999 59.962-48.593999 97.526-.281 3.803-.439 7.662-.439 11.543v48.712L0 240.637V0h225c59.674 0 116.903 23.705 159.099 65.901C426.295 108.097 450 165.326 450 225Z"
        />
      </symbol>
    </svg>
    <div id="splash" class="hidden">
      <svg style="height: 120px">
        <use href="#themed-logo" />
      </svg>
    </div>
    <div id="dialogContainer"></div>
    <div id="floatingViewContainer"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>
